<template>
	<view class="sxran-im-side">
		<slot>
			<view class="sxran-im-side-body">
				<view class="sxran-im-side-header">
					<sxran-im-text :text='product' size="20" bold></sxran-im-text>
				</view>
				<view class="sxran-im-side-content">
					<view class='sxran-im-side-item' :class="{'tab-active': currentTab == 2}" @click='onChange(2)'>
						<sxran-im-avatar v-if='avatar' :src='avatar'></sxran-im-avatar>
						<sxran-im-avatar v-else :text='name'></sxran-im-avatar>
					</view>
					<view class='sxran-im-side-item' :class="{'tab-active': currentTab == 0}" @click='onChange(0)'>
						<uni-icons type='chatbubble' size="30" :color="0 == currentTab ? 'var(--uni-text-color-active)' : 'var(--uni-text-color)'"></uni-icons>
					</view>
					<view class='sxran-im-side-item' :class="{'tab-active': currentTab == 1}" @click='onChange(1)'>
						<uni-icons type='chatboxes' size="30" :color="1 == currentTab ? 'var(--uni-text-color-active)' : 'var(--uni-text-color)'"></uni-icons>
					</view>
				</view>
				<view class="sxran-im-side-footer">
					<view class='sxran-im-side-item'>
						<uni-icons type='color' size="30" @click="openThemeChange" color='var(--uni-text-color)'></uni-icons>
						<view v-show="isTheme" class="sxran-im-theme-popup">
							<view class="sxran-im-theme-popup-body">
								<view class="theme-item" :class="{'theme-active': theme == item.value}" @click="setTheme(item.value)"
									v-for="(item, index) in themeList" :key="index">
									<uni-icons type='color' size="30" color='var(--uni-text-color)'></uni-icons>
									<sxran-im-text :text='item.name'></sxran-im-text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</slot>
	</view>
</template>

<script>
	export default {
		name: "sxran-im-side",
		props: {
			currentTab:{
				type: [Number,String],
				default: ''
			},
		},
		data() {
			return {
				isTheme: false,
				themeList: [{
						name: '极简',
						value: 'sxran-im-light'
					},
					{
						name: '温暖',
						value: 'sxran-im-warm'
					},
					{
						name: '黑暗',
						value: 'sxran-im-dark'
					},
					{
						name: '经典',
						value: ''
					}
				]
			};
		},
		computed: {
			product() {
				return uni.$Im.getProduct();
			},
			avatar() {
				return uni.$Im.getCurrentUserAvatar();
			},
			name() {
				return uni.$Im.getCurrentUserNickName();
			},
			theme() {
				return uni.$Im.getTheme();
			}
		},
		methods: {
			openThemeChange() {
				this.isTheme = !this.isTheme;
			},
			setTheme(value) {
				uni.$Im.setTheme(value);
				this.openThemeChange();
			},
			
			onChange(code){
				this.$emit('change', code);
			}
		},
	}
</script>

<style scoped lang="scss">
	.sxran-im-side {
		display: flex;
		flex-grow: 1;
		flex-direction: column;

		&-item {
			margin: $uni-spacing-col-base 0;
			cursor: pointer;
		}

		&-body {
			display: flex;
			flex-grow: 1;
			flex-direction: column;
			// overflow: hidden;
			justify-content: center;
			align-items: center;
		}

		&-header {
			margin: $uni-spacing-col-base 0;
		}

		&-content {
			display: flex;
			flex-direction: column;
			// overflow: hidden;
			justify-content: center;
			align-items: center;

			.active {
				background-color: var(--uni-bg-color-hover);
				border-radius: $uni-border-radius-lg;
				color: var(--uni-color-primary)
			}
			
			.tab-active{
				background-color: var(--uni-bg-color-hover);
				border-radius: $uni-border-radius-lg;
				color: var(--uni-color-primary)
			}

			.sxran-im-side-item {
				padding: $uni-spacing-col-sm;
				/* #ifdef H5 */
				&:hover {
					background-color: var(--uni-bg-color-hover);
					border-radius: $uni-border-radius-lg;
				
				}
				
				&:hover .uni-icons {
					color: var(--uni-text-color);
				}
				
				
				/* #endif */
				
			}

			.sxran-im-side-item:first-child {
				margin-top: auto;
			}

		}

		&-footer {
			margin-top: auto;
			margin-bottom: $uni-spacing-col-base;

			.sxran-im-side-item {
				position: relative;

				.sxran-im-theme-popup {
					position: absolute;
					border-radius: $uni-border-radius-lg;
					top: 50%;
					left: 130%;
					padding: $uni-spacing-col-base $uni-spacing-row-base;
					transform: translateY(-50%);
					z-index: 9;
					background-color: var(--uni-bg-color);
					border: 1px solid var(--uni-border-color);

					// display: none;
					&-body {
						background-color: var(--uni-bg-color);
						display: flex;
						// flex-direction: column;
						overflow: hidden;
						justify-content: space-around;
						align-items: center;
						.theme-active {
							:deep(.u-text__value){
								color: var(--uni-color-primary) !important;
							}
							
							:deep(.uni-icons) {
								color: var(--uni-color-primary) !important;
							}
						}
						.theme-item {
							cursor: pointer;
							margin: 0 $uni-spacing-row-base;
						}
					}
				}
			}

		}
	}
</style>